<template>
  <div>
    <el-table :data="assistantList" style="width: 100%">
      <el-table-column prop="name" label="店员" width="">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar" shape="square" class="border" />
          <span style="width: 150px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="绑定手机号" width="" />

      <el-table-column prop="sales" label="总销售额" width="" />
      <el-table-column prop="offline_earnings" label="总收益" width="">
        <template slot-scope="scope">
          <span @click="totalSaleClick(scope)">{{ scope.row.offline_earnings }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="detail" @click="detail">详情</span>
          <span class="forbid" @click="handleForbid">禁用</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  props: {
    id: {
      type: [Number, String],
      default: ''
    },
    assistantList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [
        {
          phone: '199999999',
          name: '易小姐',
          address: '上海市普陀区金沙江路 1518 弄',
          totalSale: '￥2000',
          totalRevenue: '￥1000',
          node: '备注',
          circleUrl:
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }, {
          phone: '199999999',
          name: '易小姐',
          address: '上海市普陀区金沙江路 1518 弄',
          totalSale: '￥2000',
          totalRevenue: '￥1000',
          node: '备注',
          circleUrl:
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }, {
          phone: '199999999',
          name: '易小姐',
          address: '上海市普陀区金沙江路 1518 弄',
          totalSale: '￥2000',
          totalRevenue: '￥1000',
          node: '备注',
          circleUrl:
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
      ],
      page: 1
    }
  },
  methods: {
    detail() {
    },
    handleForbid() {
    },
    totalSaleClick(scope) {
      this.$emit('totalSale', 'assistantTotalSale', scope.row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .detail {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .forbid {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar{
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row td {
  &:nth-child(4) {
    color: #409eff;
    cursor: pointer;
    span{
      width: 50px;
    }
  }
}
.border{
  border: 1px solid #eee
}
</style>
